<template>
  <div>
    <slot></slot>
    <div ref="loadingTarget" class="h-2 py-1"></div>
    <m-svg-icon
      v-if="isLoading"
      class="w-4 h-4 mx-auto animate-spin"
      name="infinite-load"
    ></m-svg-icon>
    <p v-if="isFinished" class="p-1 text-center text-base text-zinc-400">
      已经没有更多数据了!
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

import { useIntersectionObserver } from "@vueuse/core";

const props = defineProps<{
  isLoading: boolean;
  isFinished: boolean; // 数据是否全部加载完
}>();

const emits = defineEmits(["onload"]);

const loadingTarget = ref(null);
const targetIsIntersecting = ref(false);
useIntersectionObserver(
  loadingTarget,
  ([{ isIntersecting }], observerElement) => {
    targetIsIntersecting.value = isIntersecting;
    emitLoad();
  }
);

const emitLoad = () => {
  setTimeout(() => {
    if (targetIsIntersecting.value && !props.isFinished && !props.isLoading) {
      emits("onload");
    }
  }, 100);
};

watch(
  () => props.isLoading,
  () => {
    // emitLoad();
  }
);
</script>

<style lang="scss" scoped>
</style>